<template>
    <div>
        <Editor id="tinymce" v-model="value" :init="init"></Editor>
    </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题文件
import 'tinymce/icons/default'
import 'tinymce/models/dom'
import 'tinymce/plugins/image'  //插入编辑图片
import '../../../public/tinymce/langs/zh-CN.js'
import { inject, ref, watch } from 'vue'
export default {
    name: "editorComponents",
    components: {
        Editor,
    },
    props: {
        content: {
            type: String,
        },
    },
    data() {
        return {
            contenyt: {},
            init: {
                content_style: "img {max-width:100%;height:auto}",
                image_dimensions: false,
                language_url: "public/tinymce/langs/zh-CN.js", // 语言包位置，因为放在public下所以可以省略public
                language: "zh_CN", //语言类型
                selector: "#tinymce", //tinymce的id
                skin_url: "/skins/ui/oxide",
                height: 570, //编辑器高度
                width: 960,
                browser_spellcheck: false, // 拼写检查
                // elementpath: false, //禁用编辑器底部的状态栏
                // statusbar: false, // 隐藏编辑器底部的状态栏
                paste_data_images: false, // 允许粘贴图像
                promotion: false,
                menubar: true, //最顶部文字信息
                branding: true, //是否禁用“Powered by TinyMCE”
                plugins: "image link code table lists wordcount ax_wordlimit wordcount",
                toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor code bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen",
                //工具栏
                fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
                font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
                content_css: "/skins/content/document/content.css",
                placeholder: '请输入正文',
                images_upload_url: "http://124.221.73.180:3001/upload/photo/",
                style_formats: [
                    { title: '首行缩进', block: 'p', styles: { 'text-indent': '2em' } },
                ],
                style_formats_merge: true,
                style_formats_autohide: true,
            }
        }
    },
    mounted() {
        tinymce.init({
            selector: '#tinymce',
            content_style: "img {max-width:100%;height:auto;}",
            ax_wordlimit_num: 3,
            ax_wordlimit_callback: function (editor, txt, num) {
                console.log(txt);
                console.log(num);
                this.con();
                //tipsJS('当前字数：' + txt.length + '，限制字数：' + num);
            }
        });
    },
    setup(props, context) {
        let value = ref("");
        let needContent = inject('needContent');
        let updataContent = inject('updataContent');
        let con = () => {
            console.log("SLAJKDNASDASD");
        }
        watch(needContent, () => {
            context.emit("commit", value.value);
        })
        watch(updataContent, () => {
            value.value = updataContent.value;
            //tinymce.activeEditor.setContent(updataContent);
        })
        return {
            value,
            con,
        }
    }
}

</script>

<style scoped></style>